<template>
  <BasicDetail
    v-bind="getBindValues"
    class="custom-detail"
    @close="closePage"
    v-model:visible="visible"
    :style="{ left: width }"
    :footerHeight="46"
  >
    <template v-if="refresh">
      <div class="h-full" v-if="isComplexRef">
        <component
          :preview="false"
          isUpdate
          detail
          v-model:active="activePage"
          :is="componentItem"
          :pageType="complexDataRef.pageType"
          :dataSource="complexDataRef.modelList"
          :buttons="complexDataRef.buttons"
          :record="modalParams.record"
          :moduleId="modalParams.moduleId"
          :parentModel="modalParams.parentModel"
        />
      </div>
      <component
        v-else
        :record="record"
        :is="componentItem"
        :closeModal="closePage"
        @success="handleSuccess"
        :allData="allData"
        :modalParams="modalParams"
        :params="modalParams.params"
        :modelId="modalParams.modelId"
        :moduleId="modalParams.moduleId"
      />
    </template>
  </BasicDetail>
</template>

<script setup lang="ts">
  import { ref, computed, useAttrs, markRaw, unref } from 'vue';
  import { BasicDetail } from '/@/components/Detail';
  import { useComponent } from './useComponent';

  import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
  const { getSilderWidth } = useMenuSetting();
  const width = computed(() => {
    return unref(getSilderWidth);
  });
  const emit = defineEmits(['success', 'register', 'cancel']);
  const attrs = useAttrs();
  const loading = ref(false);
  const activePage = ref(0);

  const visible = ref<boolean>(false);
  const record = ref<object>({});
  const allData = ref<object>({});

  let componentItem = ref<any>(null);
  const refresh = ref(false);
  const isComplexRef = ref(false);
  const complexDataRef = ref<Indexable>({});
  const modalParams = ref<Indexable>({});
  const getBindValues = computed(() => {
    const values = {
      ...attrs,
      loading: loading.value,
    };
    return values;
  });

  async function toggle(visibleItem: boolean, data) {
    visible.value = visibleItem;
    record.value = data?.data;
    allData.value = data;
    refresh.value = true;
    const {
      moduleId,
      dataModelId,
      dynamicParams,
      record: rowRecord,
      params,
      title,
      parentModel,
    } = data.btnItem || {};

    modalParams.value = {
      moduleId,
      modelId: dataModelId,
      dynamicParams,
      preview: false,
      isUpdate: true,
      record: rowRecord,
      params,
      title,
      parentModel,
    };
    const { component, isComplex, complexData } = await useComponent(data.btnItem);

    componentItem.value = markRaw(component);

    isComplexRef.value = isComplex;
    complexDataRef.value = complexData || {};
  }

  function closePage() {
    visible.value = false;
    modalParams.value = {};
    refresh.value = false;
    componentItem.value = '';

    emit('cancel');
  }

  const handleSuccess = (data) => {
    emit('success', data);
  };

  emit('register', toggle);
</script>

<style lang="less" scoped>
  .custom-detail {
    // padding-bottom: 60px;
    position: fixed;
    width: calc(100% - 224px);
    height: calc(100% - 112px);
    left: 224px;
    top: 112px;
    background: #fff;
    z-index: 999;
  }
</style>
